<!-- vant步骤条自定义 -->
<template>
    <div>
      <!-- @click-step="onStep" -->
      <van-steps :active="currentSwipeItem">
        <van-step v-for="(item, idx) in dataList" :key="idx">

          <template v-slot:active-icon>
            <!-- 自定义激活时的样式 -->
            <div class="step-item">
              <div class="steps-active-icon">
                <!-- 如果有icon或者图片可以更换放在这里，我的比较简单，我直接css画个圆 -->
              </div>
              <!-- 一定要和激活状态写在一起，不然文字就去进度条上方了，不要文字这个可以不要 -->
              <span :class="item.currentSwipeItem === idx?'title-active':''">
                <!-- {{'Lv'+(idx+1)}} -->
                {{ item.title }}
              </span>
            </div>
          </template>

          <template v-slot:inactive-icon>
            <!-- 自定义未激活时的样式 由于版本问题，目前我只有slot两种，vant版本v2.12.7以上可以直接slot三种-->
            <div class="step-item">
              <!-- 未激活的样式 -->
              <div v-if="currentSwipeItem > idx" class="steps-inactive-icon">
                <!-- 如果有icon或者图片可以更换放在这里，我的比较简单，我直接css画个圆 -->
              </div>
              <!-- 激活并且完成的样式 -->
              <div v-else class="steps-finish-icon">
                <!-- 如果有icon或者图片可以更换放在这里，我的比较简单，我直接css画个圆 -->
              </div>
              <!-- 一定要和激活状态写在一起，不然文字就去进度条上方了，不要文字这个可以不要 -->
              <span :class="currentSwipeItem > idx?'title-inactive':'title-finish'">
                <!-- {{'Lv'+ (idx+1)}} -->
                {{ item.title }}
              </span>
            </div>
          </template>
        </van-step>
      </van-steps>
    </div>
  </template>
  
  <script>
  export default {
    data () {
      return {
        dataList:[
          {
            title: '办事指南',
            currentSwipeItem: 0
          },
          {
            title: '信息录入',
            currentSwipeItem: 1
          },
          {
            title: '附件上传',
            currentSwipeItem: 2
          }
        ]
        // currentSwipeItem: 0
      }
    },
    props: ['currentSwipeItem','text'],
    mounted () {
    },
    methods: {
      // onStep(index){
      //   this.currentSwipeItem = index
      // },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  // 注意这是scss，如果没有sass自行粘贴出来
  .van-steps {
    
    background: transparent; // 如果背景是白色就不需要了，默认是白色的
    width: 80%;
    margin: 0 auto;
    margin-top: -10px;
    overflow: visible; //如果不需要文字，或者不需要调整位置，可以不设置
  
    .step-item {
      position: relative;
      span {
        position: absolute;
        top: 20px;
        left: -22px;
        z-index: 1;
        font-size: 10px;
        color: #999999;
        width: 60px;
      }
      .title-active {
        // 自定义文字激活
        font-weight: bold;
        color: #1989fa;
        left: -23px;
        font-size: 13px;
        width: 60px;
      }
      .title-inactive {
        // 自定义文字激活并且完成
        color: #1989fa;
      }
      .title-finish {
        //自定义未激活
        color: #999999;
      }
    }
    .steps-active-icon {
      width: 14px;
      height: 14px;
      box-sizing: border-box;
      background: #1989fa;
      border: 3px solid #1989fa;
      border-radius: 50%;
    }
    .steps-inactive-icon,
    .steps-finish-icon {
      width: 12px;
      height: 12px;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 50%;
    }
    .steps-inactive-icon {
      border: 3px solid #1989fa;
    }
    .steps-finish-icon {
      border: 3px solid #c8c8c8;
    }
    ::v-deep .van-step__circle-container {
      background-color: transparent; // 如果背景是白色就不需要了，默认是白色的
    }
    ::v-deep .van-step--horizontal .van-step__line {
      height: 4px; // 自定义调整进度条的粗细
      top: 28px; // 自定义调整进度条的位置
      background-color: #e4e4e4;
    }
    ::v-deep .van-step--finish .van-step__line {
      background-color: #1989fa; //自定义激活时进度条的颜色
    }
  }
  </style>
  
  